// 路由过渡
.router-enter-active,
.router-leave-active {
  // transition: all .25s ease-out;
  transition: all .25s linear;
}
.router-enter-from {
  opacity: 0;
  transform: translateY(30px);
  // transform: translateX(-30px)
}
.router-leave-to {
  opacity: 0;
  transform: translateY(-30px);
  // transform: translateX(30px)
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
// 弹框过渡
.dialoger-enter-active,
.dialoger-leave-active {
  transition: all .5s linear;
}
.dialoger-enter-active .dialog-container,
.dialoger-leave-active .dialog-container {
  transition: all .25s linear;
}
.dialoger-enter-from {
  opacity: 0;
}
.dialoger-enter-from .dialog-container {
  opacity: 0;
  transform: translateY(30px);
}
.dialoger-leave-to {
  opacity: 0;
}
.dialoger-leave-to .dialog-container {
  opacity: 0;
  transform: translateY(30px);
}

// 上传组件中间变化过渡
.upload-enter-active,
.upload-leave-active {
  transition: all .25s ease;
}
.upload-enter-from {
  opacity: 0;
}
.upload-leave-to {
  opacity: 0;
}

.appear-enter-active,
.appear-leave-active {
  transition: all .5s ease;
}
.appear-enter-from {
  opacity: 0;
}
.appear-leave-to {
  opacity: 0;
}

// 加载动画出现过渡
.loading-enter-active,
.loading-leave-active {
  transition: opacity .25s linear;
}
.loading-enter-from {
  opacity: 0;
}
.loading-leave-to {
  opacity: 0;
}

// 步骤动画上一步
.stepleft-leave-active {
  transition: all 0.5s linear;
}
.stepleft-enter-active {
  transition: all 0.5s ease;
}
.stepleft-leave-to {
  transform: translateX(100px);
  opacity: 0;
}
.stepleft-enter-from {
  transform: translateX(-100px);
  opacity: 0;
}
// 步骤动画下一步
.stepright-leave-active {
  transition: all 0.5s linear;
}
.stepright-enter-active {
  transition: all 0.5s ease;
}
.stepright-leave-to {
  transform: translateX(-100px);
  opacity: 0;
}
.stepright-enter-from {
  transform: translateX(100px);
  opacity: 0;
}
// 模块下载的dom切换
.links-out-enter-active {
  transition: all 0.4s linear;
}
.links-out-leave-active {
  transition: all 0.4s ease;
}
.links-out-leave-to {
  transform: translateX(-100px);
  opacity: 0;
}
.links-out-enter-from {
  transform: translateX(100px);
  opacity: 0;
}
//
.links-in-enter-active {
  transition: all 0.4s linear;
}
.links-in-leave-active {
  transition: all 0.4s ease;
}
.links-in-leave-to {
  transform: translateX(100px);
  opacity: 0;
}
.links-in-enter-from {
  transform: translateX(-100px);
  opacity: 0;
}
// 列表的list动画
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}


